<template>
  <div>
    <!-- 昵称 -->
    <van-popup v-model="showName" position="right">
      <van-nav-bar
        left-arrow
        title="编辑昵称"
        @click-left="showName = false"
        @click-right="submit"
      >
        <template #right>
          <div style="color:#f40">提交</div>
        </template>
      </van-nav-bar>
      <van-form ref="form">
        <van-field :rules="rules" v-model="inputVal"></van-field>
      </van-form>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: 'EditName',
  data () {
    return {
      showName: false,
      inputVal: '',
      rules: [
        { required: true, message: '必填', trigger: 'onBlur' },
        {
          validator: value => {
            return value !== this.$store.state.user.userInfo.name
          },
          message: '不能和当前昵称一样',
          trigger: 'onBlur'
        }
      ]
    }
  },
  methods: {
    submit () {
      this.$refs.form
        .validate()
        .then(() => {
          //   console.log('成功')
          this.$parent.editUserInfo({
            key: 'name',
            value: this.inputVal
          })
          this.inputVal = ''
          this.showName = false
        })
        .catch(() => {})
    }
  }
}
</script>

<style lang="less" scoped>
.van-popup {
  width: 100%;
  height: 100%;
}
::v-deep .van-field__control {
  background: @geek-gray-color;
  padding: 10px;
  border-radius: 4px;
}
</style>
